<html>
<head>
    <title>Student Recommendations</title>

       <style>


        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
        }
        .title {
            color: #fff;
            font-size: 18px;
            font-weight: 200;
            align:center;
        }
    </style>

</head>
<body>
    <h1>Content-Based Filtering Recommendations</h1>
    <ul>
        {% for student in content_based_students %}
            <li>{{ student[0] }}</li>
        {% endfor %}
    </ul>

    <ul>
        {% for student in collaborative_filtering_students %}
            <li>{{ student }}</li>
        {% endfor %}
    </ul>
</body>
</html>
